<template>
  <section>
    <van-nav-bar :title="`选座位`"
                 :fixed=true
                 :border=false
                 @click-left="onClickLeft"
                 left-arrow
                 style="height:2.5rem;color: #FFFFFF" />
    <div class="movie-group">
      <img src="../assets/bg.jpg" alt="">
      <div class='movie-desc-group'>
        <h2>{{ cinemaInfo.cinemaName }}</h2>
        <div class="movie-desc" v-if="currentInfo">
          <div class="movie-desc-left">
            {{ movieInfo.movieName }} | {{ hallInfo.cinemaHallName }}
          </div>
          <div class="movie-desc-right">
            {{movieShowInfo.startTime}}
          </div>
        </div>
      </div>
    </div>

    <div class="section">

      <ul class="reveal-group">
        <li class="icon-seat-group">
          <i class="icon sure"></i><span class="text">可选</span>
        </li>
        <li class="icon-seat-group">
          <i class="icon selected"></i><span class="text">已选</span>
        </li>
        <li class="icon-seat-group">
          <i class="icon not"></i><span class="text">不可选</span>
        </li>
      </ul>
      <section class="screen-group">
      </section>

      <van-row type="flex" justify="center" v-for="i in range(hallInfo.maxSeatY)" :key="'Y'+i" gutter="5">
          <van-col v-for="(item,index) in hallSeatInfo[i]" :key="item.seatId">
            <i class="icon selected" @click="seat_selection(item.seatId,'del')" :data-index="index" v-if="select_position && select_position.indexOf(item.seatId) != -1"></i>
            <i class="icon not" :data-index="index" v-else-if="notSelectSeatIds && notSelectSeatIds.indexOf(item.seatId)!==-1"></i>
            <i class="icon sure" @click="seat_selection(item.seatId,'add')" :data-index="index" v-else-if="select_position.indexOf(item.seatId) == -1"></i>
          </van-col>
      </van-row>

      <div class="summary-group">
        <van-row type="flex" justify="center">
          <van-col>
            您已经选择<span>{{select_position.length}}</span>个座位，共 <span class="price">{{ (movieShowInfo.oldPrice*select_position.length).toFixed(2)}}</span> 元
          </van-col>
        </van-row>
        <van-row type="flex" justify="center" gutter="10">

          <van-col>
            <van-button  plain hairline round type="info" @click="preCheckOrder">确认选座</van-button>
          </van-col>
          <van-col>
            <van-button  plain hairline round type="warning" @click="clearSelect">清除选择</van-button>
          </van-col>
        </van-row>
      </div>
    </div>
  </section>
</template>

<script>
import {getSeatInfo, preCheckOrder} from "@/api/movie";
import {getJwtToken} from "@/lib/utils/TokenUtil";
import store from "@/store";

export default {
  name: 'Index',
  props: ['movieShowId','hallId','movieId' ],
  beforeRouteEnter (to,from,next) {
    if (getJwtToken()!==''){
      if (store.state.user.isGetInfo){
        next()
      }else {
        store.dispatch('GetUserInfo').then(()=>{
          next()
        })
      }
    }else{
      next('/login')
    }
  },
  mounted() {
    getSeatInfo({msid:this.movieShowId})
        .then(res=>{
          let info = res.data
          this.hallSeatInfo = info.hallSeatInfo
          this.hallInfo = info.hallInfo
          this.notSelectSeatIds = info.notSelectSeatIds
          this.movieShowInfo = info.movieShowInfo
          this.cinemaInfo = info.cinemaInfo
          this.movieInfo = info.movieInfo
        }).catch(err=>{
      this.$toast.fail({message:err.message})
    })
  },
  data (){
    return {
      cinemaInfo:{},
      hallInfo:{},
      movieInfo:{},
      currentInfo:{},
      movieShowInfo:{},
      hallSeatInfo:{},
      cinemaHallName:'',
      allow: [1,2,3,6,8,10,20,21],//可以选择的
      select_position: [],//我已经选中的
      notSelectSeatIds:[],//已经被选的
    }
  },
  computed:{
    totalPrice(){
      let t = this.movieShowInfo.oldPrice*this.select_position.length
      return t.toFixed(2)
    }
  },
  methods:{
    clearSelect(){
      this.select_position = []
    },
    preCheckOrder(){
      if (getJwtToken()!==''){
        sessionStorage.setItem("cinemaInfo",JSON.stringify(this.cinemaInfo));
        sessionStorage.setItem("hallInfo",JSON.stringify(this.hallInfo));
        sessionStorage.setItem("movieInfo",JSON.stringify(this.movieInfo));
        sessionStorage.setItem("movieShowInfo",JSON.stringify(this.movieShowInfo));
        sessionStorage.setItem("selectSeat",JSON.stringify(this.select_position));
        console.log({
          movieShowId:this.movieShowInfo.movieShowId,
          hallId:this.hallInfo.cinemaHallId,
          seatIds:this.select_position})
        preCheckOrder({
          accountId:store.state.user.accountInfo.accountId,
          movieShowId:this.movieShowInfo.movieShowId,
          hallId:this.hallInfo.cinemaHallId,
          seatIds:this.select_position
        }).then(res=>{
          console.log(res.data)
          sessionStorage.setItem("orderInfo",JSON.stringify(res.data))
          this.$router.push('/order')
        })
      }else {
        this.$toast.fail({message:'请先登录后再进行选座操作'})
      }

    },
    addOrder(){
      console.log(this.movieShowInfo.movieShowId,this.select_position)
    },
    range(conut){
      let arr = []
      for (let i=1;i<=conut;i++){
        arr.push(i)
      }
      return arr
    },
    // 返回
    onClickLeft () {
      this.$router.back();
    },
    seat_selection (id, type){
      if (type == 'add'){
        this.select_position.push(id);
      }else{
        for(let i=this.select_position.length; i>0; i--){
          if (this.select_position.length ===1){
            this.select_position = []
          } else if(this.select_position[i] == id){
            this.select_position.splice(i, 1);
          }
        }
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.section{
  padding:0 1rem;
  box-sizing: border-box;
}
.movie-group{
  position: relative;
  height: 11rem;
  overflow: hidden;
}
.movie-group img{
  width:100%;
}
.movie-group .movie-desc-group{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color: #fff;
  background: -webkit-linear-gradient(left,  #ecaa40 , #ff3361); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right,  #ecaa40, #ff3361); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right,  #ecaa40, #ff3361); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right,rgba(236,170,64, 0.5) , rgba(255,51,97, .4));
}
.movie-desc-group h2{
  text-align: center;
  margin-top:4.6rem;
  font-size:1.2rem;
  color:#fff;
}
.movie-desc{
  padding:0 1rem;
  margin-top:2.6rem;
  display: flex;
  justify-content:space-between;
  align-items: center;
  color: #fff;
  font-size: 0.8rem;
}
.movie-desc-right{
  /* font-size:1.8rem;
   font-weight: 500; */
}
.film-select-group{
  text-align: center;
  margin-top:2rem;
}
.film-select-group label{
  font-size: 1rem;
}
.film-select-group select{
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  outline: none;
  height:2rem;
  border:0;
  padding:0 0.5rem;
  border-radius: 0.4rem;
  width:11rem;
}
.reveal-group{
  overflow: hidden;
  width:15rem;
  margin:2rem auto 0;
  padding:.4rem 0;
  background:#1f1b2c;
  padding-left:2.8rem;
  color: #fff;
}

.icon-seat-group{
  float:left;
  font-size:0.8rem;
  margin-right:1rem;
}
.icon-seat-group .text{
  margin-left:0.5rem;
}
.screen-group{
  width:13rem;
  height:0;
  margin:2rem auto;

  border-top: 4rem solid #999;
  border-left: 2.5rem solid transparent;
  border-right: 2.5rem solid transparent;
}

.seat-group{
  overflow-x: hidden;
  width:20rem;
  box-sizing: border-box;
  margin:0 auto;
  display: table;		 /*这里是关键步骤：*/

}
.seat-group li{


}
.seat-group li span{
  content: '';
  display: inline-block;
  clear: both;
  margin-right:1rem;
}
.summary-group{
  margin-top: 1rem;
  font-size: 0.8rem;
}
.summary-group .price{
  font-size: 1.6rem;
  font-weight: 500;
}
.submit-btn{
  display: block;
  margin:1rem auto;
  line-height: 2.6rem;
  padding:0 7rem;
  border:0;
  border-radius: 4rem;
  background: rgb(243,129,155);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}


.icon{
  display: inline-block;
  width:1rem;
  height:0.7rem;
  background: #ccc;
  border-radius: 5rem 5rem 0 0;
}
.selected{
  background: #5ff6fb;
}
.not{
  background: #e85151;
}
</style>
